<template>
  <n-drawer :width="width">
    <n-drawer-content :title="drawer.title">
      <template #header v-if="$slots.header">
        <n-space justify="start">
          <slot name="header"></slot>
        </n-space>
      </template>
      <template #footer v-if="$slots.action || drawer.buttons.length">
        <n-space justify="end" v-if="$slots.action">
          <slot name="action"></slot>
        </n-space>
        <n-space justify="end" v-else-if="drawer.buttons.length">
          <ocean :use="drawer.buttons"></ocean>
        </n-space>
      </template>
      <div v-if="$slots.default">
        <slot></slot>
      </div>
      <div v-else-if="drawer.component">
        <component :is="drawer.component()" v-bind="drawer.componentAttrs" ref="componentRef"></component>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="tsx">
import { computed, ref, onMounted } from 'vue';


let props = defineProps<{
  ocean: any,
  width?: string,
  size?: 'small' | 'medium' | 'large' | 'full',
}>()

let Size = {
  'small': '600px',
  'medium': '1000px',
  'large': '1400px',
  'full': '90%',
}

const drawer = computed(() => props.ocean);
const width = computed(() => props.width || Size[props.size]);

const componentRef = ref();

onMounted(() => {
  drawer.value.setRef(componentRef)
})
</script>